<template>
  <div class="echartItem">
    <div class="echartItem_title">
      {{ data.title }}
      <el-icon
        @click="isExpand = !isExpand"
        style="margin-right: 20px; cursor: pointer"
      >
        <ArrowDown v-if="isExpand" />
        <ArrowRight v-else />
      </el-icon>
    </div>
    <div class="echartItem_graphy" ref="echart" v-show="isExpand"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import * as echarts from "echarts";
import { default as Item } from "./ItemClass";
export default defineComponent({
  emits: ["update:echartIns"],
  data() {
    return {
      loading: true,
      isExpand: true,
    };
  },
  props: {
    data: {
      type: Item,
      default: {},
    },
  },
  methods: {
    toggle() {},
    init(width = "100%") {
      //将父元素宽高赋值给图表
      let myEcharts = this.$refs["echart"];
      myEcharts.style.width = width;

      //初始化
      this.echartIns = echarts.init(this.$refs["echart"] as any) as any;
      console.log("echart init");
      this.echartIns.on('click',function(params) {
        // 控制台打印数据的名称
        console.log(params.name);
      });
      return this.echartIns;
    },
    render() {
      // 绘制图表
      this.echartIns.showLoading();
      // this.loading = true;
      let map = {
        error: "误差",
        maximum: "最大值",
        minimum: "最小值",
        average: "平均值",
        variance: "方差",
        real: "实际值",
        target: "目标值",
      };
      let seriesArray = this.data.showFields.map((field) => {
        return {
          name: map[field],
          type: "line",
          symbol: "none",
          sampling: "lttb",
          itemStyle: {
            // color: "rgb(255, 70, 131)",
          },
          data: this.data.hashList[field],
          // markArea: {
          //   itemStyle: {
          //     color: "rgba(28, 61, 215, 0.1)",
          //   },
          //   data: [
          //     [
          //       {
          //         // name: "自动驾驶",
          //         xAxis: "1970/1/17",
          //       },
          //       {
          //         xAxis: "1972/7/17",
          //       },
          //     ],
          //     [
          //       {
          //         // name: "自动驾驶",
          //         xAxis: "1976/2/17",
          //       },
          //       {
          //         xAxis: "1979/9/17",
          //       },
          //     ],
          //   ],
          // },
        };
      });

      let option = {
        grid: {
          top: 30,
          left: 50,
          right: 50,
        },
        tooltip: {
          trigger: "axis",
          // appendToBody: true,
          // backgroundColor: "rgba(255,255,255,0.7)",
          // borderColor: "#000",
          // extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);",
          confine: true,
          showContent: true,
          // showDelay: 100,
          // hideDelay: 100,
          // enterable: true,
          // formatter: "{b0}: {c0}<br />{b1}: {c1}",
          // valueFormatter: (value) => "$" + value.toFixed(2),
          alwaysShowContent: true,
          position: function (pt) {
            return [pt[0], "10%"];
          },
          // order: "",
        },
        legend: {
          type: "plain",
          left: "right",
          // width: 200,
          itemStyle: {
            opacity: 0,
          },
          lineStyle: {
            width: 2,
          },
          itemWidth: 20,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.data.dates,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        dataZoom: [
          {
            type: "slider",
            startValue: 0,
            endValue: 20000,
            // minValueSpan: 3000,
            throttle: 300,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        series: seriesArray,
      };
      this.echartIns.setOption(option);
      this.echartIns.hideLoading();
    },
  },
});
</script>

<style lang="scss" scoped>
.echartItem {
  text-align: left;
  width: 100%;
  // height: 370px;
  position: relative;
  margin-bottom: 10px;
  .echartItem_title {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .echartItem_graphy {
    margin-top: 10px;
    height: 300px;
    width: 100%;
  }
}
</style>